<template>
  
  <el-form
    label-width="100px"
    :model="form"
    style="max-width: 460px"
  >
    <el-form-item label="图片链接">
      <el-input v-model="form.img" />
    </el-form-item>
    <el-form-item label="图片提示">
      <el-input v-model="form.alt" />
    </el-form-item>
    <el-form-item label="图片地址">
      <el-input v-model="form.link" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">添加</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive} from 'vue'
import service from '../../../untils/service';
import { ElMessage } from "element-plus";
import 'element-plus/dist/index.css';


const form = reactive({
  img: '',
  alt: '',
  link: '',
})

const onSubmit = () => {

  if (form.img == '' || form.alt == '' || form.link == '') {
    ElMessage({
        message:'请输入未输入的内容',
        type:'error'
      })
      console.log(form.img)
  } else if (form.img !== '' && form.alt !== '' && form.link !== '') {
    service({
        url:'/banner/add',
        method:"post",
        data:form
    }).then(res=>{
        if(res.data.code === '200') {
          ElMessage({
          message:'添加成功',
          type:'success'
      })
        }
    })
  }
   
}
</script>

<style>

</style>